<template>
  <div class="content select">
    <form id="form_wuxing">
	    <table border="1" cellspacing="0" cellpadding="0">
	      <tr>
	        <th class="td_name1">种类</th>
	        <td class="td_time1">赔率</td>
	        <td class="td_amount1">金额</td>
	        <td class="td_number">号码</td>
	      </tr>
	      <tr>
	        <th class="td_name">金</th>
	        <td class="td_time">11.1</td>
	        <td class="td_amount"><input type="number" name="jin" @blur='addCount' /></td>
	        <td class="td_number">
	          <span class="round bg1">03</span>
	          <span class="round bgGreen">04</span>
	          <span class="round bgRed">17</span>
	          <span class="round bgRed">18</span>
	          <span class="round bg1">25</span>
	          <span class="round bgGreen">26</span>
	          <span class="round bgRed">33</span>
	          <span class="round bgRed">34</span>
	          <span class="round bgRed">47</span>
	          <span class="round bgRed">48</span>
	        </td>
	      </tr>
	      <tr>
	        <th class="td_name">木</th>
	        <td class="td_time">11.1</td>
	        <td class="td_amount"><input type="number" name="mu" @blur='addCount' /></td>
	        <td class="td_number">
	          <span class="round bg1">07</span>
	          <span class="round bg1">08</span>
	          <span class="round bgGreen">15</span>
	          <span class="round bgRed">16</span>
	          <span class="round bg1">29</span>
	          <span class="round bg1">30</span>
	          <span class="round bgGreen">37</span>
	          <span class="round bgRed">38</span>
	          <span class="round bg1">45</span>
	          <span class="round bg1">46</span>
	        </td>
	      </tr>
	      <tr>
	        <th class="td_name">水</th>
	        <td class="td_time">11.1</td>
	        <td class="td_amount"><input type="number" name="shui" @blur='addCount' /></td>
	        <td class="td_number">
	          <span class="round bgRed">05</span>
	          <span class="round bgRed">06</span>
	          <span class="round bg1">13</span>
	          <span class="round bgGreen">14</span>
	          <span class="round bgRed">21</span>
	          <span class="round bgRed">22</span>
	          <span class="round bg1">35</span>
	          <span class="round bgGreen">36</span>
	          <span class="round bgRed">43</span>
	          <span class="round bgRed">44</span>
	        </td>
	      </tr>
	      <tr>
	        <th class="td_name">火</th>
	        <td class="td_time">11.1</td>
	        <td class="td_amount"><input type="number" name="huo" @blur='addCount' /></td>
	        <td class="td_number">
	          <span class="round bgGreen">01</span>
	          <span class="round bgGreen">02</span>
	          <span class="round bgRed">09</span>
	          <span class="round bg1">10</span>
	          <span class="round bgGreen">23</span>
	          <span class="round bgGreen">24</span>
	          <span class="round bgRed">31</span>
	          <span class="round bg1">32</span>
	          <span class="round bgGreen">39</span>
	          <span class="round bgGreen">40</span>
	        </td>
	      </tr>
	      <tr>
	        <th class="td_name">土</th>
	        <td class="td_time">11.1</td>
	        <td class="td_amount"><input type="number" name="tu" @blur='addCount' /></td>
	        <td class="td_number">
	          <span class="round bgGreen">11</span>
	          <span class="round bgRed">12</span>
	          <span class="round bgRed">19</span>
	          <span class="round bg1">20</span>
	          <span class="round bgGreen">27</span>
	          <span class="round bgGreen">28</span>
	          <span class="round bg1">41</span>
	          <span class="round bg1">42</span>
	          <span class="round bgGreen">49</span>
	          <span class="round bgRed">48</span>
	        </td>
	      </tr>
	    </table>
    </form>
    <div class="bottom">
      总金额共{{ count }}元
      <el-button type="warning" @click='addTouzhu' >添加投注</el-button>
    </div>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
    	<div class="dialogCgj">
    		<h3 class="red">你确定要加入{{ caipiaoTerm }}期吗？</h3>
    		<ul>
    			<li v-for="(item, index) in params">
    				<div class="flex"><span style="white-space: nowrap;">
            					号码：</span><span class="red single_ellipsis">{{item.number}} 号</span> 赔率：
    					</span><span class="red single_ellipsis">{{item.peilv}}</span> 金额：
    					</span><span class="red single_ellipsis">{{item.amount}} 元</span>
    				</div>
    			</li>
    		</ul>
    		总金额：<span class="red">{{ count }} 元</span>
    	</div>
    	<span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消投注</el-button>
                <el-button type="primary" @click="addSendData">确定投注</el-button>
              </span>
    </el-dialog>
  </div>
</template>

<script>
	import $ from 'jquery'
	import addCount from '../../../../../../assets/js/hallCount.js'
	import lhcTouZhu from '../../../../../../assets/js/lhcTouZhu.js'
	
  export default {
  	props: ['caipiaoTerm', 'childArr'],
    data () {
      return {
      	centerDialogVisible: false,
        count: 0,
        form: [],
        eleForm: '#form_lianxiao_top',
        eleForm2: '#form_wuxing',
        params: [],
      	gameType: 15,
      	ticketId: 20
      }
    },
    created () {
    	this.gameType = this.childArr.gameType
    	this.ticketId = this.childArr.ticketId
    },
    beforeMount () {
//  	console.log(this.gameType)
//  	console.log(this.ticketId)
    },
    methods: {
    	addTouzhu () {
				this.params = []
      	let str = $('#form_wuxing').serialize()
      	this.form = str.split('&')
      	this.params = lhcTouZhu(this.form, this.gameType, this.caipiaoTerm, this.ticketId)
      	console.log(this.params)
      	this.centerDialogVisible = true
      },
      addCount () {
        this.count = addCount(this.eleForm2)
      },
      addSendData () {
      	this.centerDialogVisible = false
      	this.params.forEach((item, index) => {
      		let params2 = {}
      		params2.lhcCalls = []
      		params2.lhcCalls.push(item)
      		this.$api.lhc_call_call(item).then((res) => {
	      		console.log(res)
	      		if(res.code == "000000") {
	      			this.$message.success('投注成功')
	      		}
	      	})
      	})
      }
    }

  }
</script>

<style lang="less" scoped>
@import "../../../style/game";
</style>
